<template>
  <el-dialog
    title="修改认证信息"
    :visible.sync="showDialog"
    width="50%"
    @close="handleClose">


    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-upload
          class="upload-demo"
          action="string"
          :http-request="handlePreview"
          :on-remove="handleRemove"
          list-type="picture">
          <el-button size="small" type="primary">点击修改头像</el-button>
          <div slot="tip" class="el-upload__tip">
            <img v-if="hidden" :src=formData.storeImg alt="" style="width: 80px;height: 80px">
            <div>只能上传jpg/png文件，且不超过500kb</div>
          </div>
        </el-upload>

        <el-col :span="12">
          <el-form-item label="商铺名称" prop="storeName">
            <el-input v-model="formData.storeName" placeholder="请输入商铺名称" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="负责人" prop="storeHost">
            <el-input v-model="formData.storeHost" placeholder="请输入负责人" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="formData.email" placeholder="请输入邮箱" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="formData.phone" placeholder="请输入手机号" :maxlength="11" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证号" prop="idNumber">
            <el-input v-model="formData.idNumber" placeholder="请输入身份证号" :maxlength="18" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="地址" prop="address">
            <el-input v-model="formData.address" type="textarea" placeholder="请输入地址"
                      :autosize="{minRows: 2, maxRows: 2}" :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="店铺描述" prop="others">
            <el-input v-model="formData.others" type="textarea" placeholder="请输入店铺描述"
                      :autosize="{minRows: 3, maxRows: 3}" :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <span slot="footer" class="dialog-footer">
            <el-button @click="showDialog = false">取 消</el-button>
            <el-button type="primary" @click="doUpdate">确 定</el-button>
        </span>

  </el-dialog>
</template>

<script>
  export default {
    name: 'updateComfirm',
    // 接受父组件传递的值
    props:{
      updateComfirmVisible:{
        type: Boolean,
        default: false
      },
    },
    data(){
      return{
        // 控制弹出框显示隐藏
        hidden:true,
        showDialog:false,
        formData: {
          storeName: undefined,
          storeHost: undefined,
          email: undefined,
          phone: undefined,
          idNumber: undefined,
          address: undefined,
          others: undefined,
          storeImg:undefined,
          updateTime:undefined
        },
        rules: {
          storeName: [{
            required: true,
            message: '请输入商铺名称',
            trigger: 'blur'
          }],
          storeHost: [{
            required: true,
            message: '请输入负责人',
            trigger: 'blur'
          }],
          email: [{
            required: true,
            message: '请输入邮箱',
            trigger: 'blur'
          }],
          phone: [{
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          }],
          idNumber: [{
            required: true,
            message: '请输入身份证号',
            trigger: 'blur'
          }],
          address: [{
            required: true,
            message: '请输入地址',
            trigger: 'blur'
          }],
          others: [],
        },
      }
    },
    methods:{
      // 弹出框关闭后触发
      handleClose(){
        // 子组件调用父组件方法，并传递参数
        this.$emit('changeShow','false')
      },
      selectUserComfirm(){
        const user = JSON.parse(window.sessionStorage.getItem('user'));
        let userId = parseInt(user.userId);
        this.postRequest('/personal/data/comfirm/'+userId).then(resp=>{
          if (resp){
            this.formData = resp;
          }
        })
      },
      doUpdate(){
        this.putRequest('/personal/data/comfirm/',this.formData).then(resp=>{
          if (resp){
            this.formData.updateTime=this.getCurrentTime();
            this.showDialog = false;

            this.$notify.success({ title: '成功', message: '修改成功' });
          }
        })
        // this.$parent.handleClose();
      },
      //上传图片
      handlePreview(item) {
        console.log(item);
        console.log("轮到我了")
        let formData = new FormData()
        formData.append('file', item.file);
        this.hidden=false;
        this.postRequest('/good/data/uploadImgFile',formData).then(resp => {
          if (resp) {
            console.log(resp);
            this.user.avatar=resp.obj;
          }
        })
      },

      //删除图片
      handleRemove() {
        this.hidden=true;
        let formData = new FormData()
        formData.append('file', this.formData.avatar)
        this.postRequest('/good/data/deleteImgFile',formData).then(resp => {
          if (resp) {
            console.log(resp);
          }
        })
      },
    },
    mounted () {
      this.selectUserComfirm();
    },
    watch:{
      // 监听 updateComfirmVisible 改变
      updateComfirmVisible(oldVal,newVal){
        this.showDialog = this.updateComfirmVisible
      },
    }
  }
</script>

<style scoped>
  .upload-demo{
    margin-left: 50px;
    margin-bottom: 30px;
  }
</style>
